function random(n1,n2) {
    return Math.floor( (Math.random() * (n2-n1+1)) + n1 );
}

var isAniLoad = false;
var scrollDelay = 300;
function scrollAction(){
    if(isAniLoad) {
        $('.js-ani').each(function(){
            if($(this).offset().top+scrollDelay < $(window).scrollTop()+window.innerHeight){
                if($(this).hasClass('s-ani_on')){
                } else {
                    $(this).addClass('s-ani_on');
                }
            }
            if($(this).offset().top+$(this).height() < $(window).scrollTop()){
                $(this).removeClass('s-ani_on');
            }
            if($(this).offset().top > $(window).scrollTop()+window.innerHeight){
                $(this).removeClass('s-ani_on');
            }
        });
    }
}

function setScale() {
    var wid = $(".section1").width();
    var hgt = $(window).height();

    if(wid <= 1366)
        wid = 1366;

    if(wid >= 1920)
        wid = 1920;

    var wr = hgt/wid
    if(wr > 9/16) {
        $("#bgVideo").height(hgt).width(hgt*16/9);
    } else {
        $("#bgVideo").width(wid).height((wid*9/16));
    }
}

var Fire = function Fire(ctx, canvas, y, config) {
    this.ctx = ctx;
    this.canvas = canvas;
    this.y = y;
    this.config = config;
    this.sparks = [ ];
    this.fps = true;
};
Fire.prototype.spark = function(x) {
    if(this.fps) {
        this.sparks.push(new Spark(this.ctx, this.canvas, x, this.y, this.config));
        this.fps = false;
        var fire = this;
        window.setTimeout(function(e){ fire.fps = true; }, 80);
    }
};
Fire.prototype.update = function() {
    for (var i=0; i<this.sparks.length; i++) {
        if (this.sparks[i].update()) {
            this.sparks.splice(i, 1);
        }
    }
};

var shLg = true;
var Spark = function Spark(ctx, canvas, x, y, config) {
    this.ctx = ctx;
    this.pos = [x, y];
    this.v = [
        config.meanSparkVelocity[0]*(Math.random()-0.5),
        -1*config.meanSparkVelocity[1]*Math.random()
    ];
    this.life = this.lifeOrig = Math.floor(config.meanSparkLife*Math.random());
    this.config = config;
    this.lg = true;

    this.img = document.getElementById('ash'+random(1, 3));
};
Spark.prototype.move = function() {
    for (var i=0; i<2; i++) {
        this.pos[i] += this.v[i]*(1-this.life/this.lifeOrig);
    }
};
Spark.prototype.getAlpha = function() {
    return Math.sqrt(this.life/this.lifeOrig)+((Math.random()-0.5)/this.config.sparkBlink);
};
Spark.prototype.update = function() {
    this.move();
    if (!(this.life--)) { return true; }
    this.ctx.beginPath();
    this.ctx.globalAlpha = this.getAlpha();
    this.ctx.drawImage(this.img, this.pos[0], this.pos[1]);
};

$(function() {
    // intro1 title random
    $(".js-int_title i").each(function(){
        $(this).css({"transform":"translate("+ random(-40, 40) +"px,"+ random(-40, 40) +"px)", "transition-delay":+ random(0, 700)/1000 +"s"});
    });

    // intro2 card mouseover
    $(".js-card_mask").after().hover(function(){
        $(".js-card_priest").addClass("s-on");
    }, function(){
        $(".js-card_priest").removeClass("s-on");
    }).click(function(){
        $("body").addClass("s-section_on");
        $(".sections").attr("id","sec1");
        setScale();
    });

    // intro2 card click
    $(".js-card").click(function(){
        var section = $(this).data("section");
        $("body").addClass("s-section_on");
        $(".sections").attr({"id":"sec"+section});
        setScale();
    });

    // section btn
    $(".js-btn_back").click(function(){
        $("body").removeClass("s-section_on");
        $(".sections").attr({"id":""});
    });

    // scroll
    $(window).scroll(function(){
        scrollAction();
    }).resize(function(){
        setScale();
    });

    setTimeout(function(){
        isAniLoad = true;
        scrollAction();
    }, 700);

    //video
    $("#videoBtn").click(function(){
        var layer = $(".layer_vod");
        layer.find("iframe").attr("src", "https://www.youtube.com/embed/PpCFuw1sLjU?rel=0&autoplay=1");
        layer.show();
    });
    $(".ly_clse").click(function(){
        var layer = $(".layer_vod").hide();
        layer.find("iframe").attr("src", "");
    });
    $(".mask_wrap").click(function(){
        var layer = $(".layer_vod").hide();
        layer.find("iframe").attr("src", "");
    });

    // fire
    var canvas = document.getElementById('fire');
    var ctx = canvas.getContext('2d');
    var config = {
        meanSparkLife: 400,
        meanSparkVelocity: [2, 6],
        sparkBlink: 10,
    };

    var resize = window.resize = function() {
        canvas.height = 900;
        canvas.width = document.body.offsetWidth;
    };
    resize();

    var fire = new Fire(ctx, canvas, canvas.height, config);
    var loop = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        fire.update();
        for (var i=0; i<1; i++) {
            fire.spark(Math.random()*canvas.width);
        }
        window.requestAniFrame(loop);
    };
    window.requestAniFrame = function(){
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) { window.setTimeout(callback, 1000/60); };
    }();
    loop();

});